<template>
  <view class="container_page">
    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />

    <image class="header" :src="baseImgUrl + '/login/header_login.png'" />

    <view class="main">
      <view class="title">欢迎登录~</view>

      <view class="formItem">
        <view class="label">账号</view>
        <input v-model="form.username" placeholder="请输入账号" />
      </view>

      <view class="formItem">
        <view class="label">密码</view>
        <input
          v-model="form.password"
          type="password"
          placeholder="请输入密码"
        />
      </view>

      <view class="formItem">
        <view class="label">验证码</view>
        <input class="content" v-model="form.code" placeholder="请输入验证码" />

        <!-- 图片验证码 -->
        <image class="code" :src="codeUrl" @click="getCode" />
      </view>

      <view class="btn_login" @click="btn_login()">登录</view>
    </view>

    <view class="footer" />

    <toast />
  </view>
</template>
<script>
import { getCodeImg } from "@/api/login.js";
import { sm2Encrypt } from "@/utils/sm2";
let _ = require("lodash");
import { baseImgUrl } from "config.js";
export default {
  data() {
    return {
      loading: false,
      baseImgUrl: baseImgUrl,
      // 导航栏参数
      navOptions: {
        left: {
          icon: "back",
        },
      },
      form: {
        username: "",
        password: "",
        code: "",
        uuid: "",
      },
      codeUrl: "", // 验证码图片 base64链接
      url: "", // 社会单位扫二维码进入报告签收页面时因未登录或者token失效返回登录页所携带回来的路由信息
    };
  },
  mounted() {
    this.getCode();
  },
  methods: {
    // 登录
    btn_login() {
      if (!this.loading) {
        this.loading = true;

        let that = this;
        new Promise((resolve, reject) => {
          let obj = _.cloneDeep(this.form);
          obj.password = sm2Encrypt(obj.password);
          this.$store.dispatch("login_login", obj).then((res) => {
            if (res && res.code === 200) {
              setTimeout(() => {
                resolve(res.token);
              }, 1000);
            } else {
              this.$showToast({
                show: true,
                text: res.msg || "登录错误",
              });
              this.loading = false;
              this.getCode();
            }
          });
        }).then((res) => {
          // 登录成功判断url是否存在值，若存在，需请求后端判断是否为社会单位
          if (that.url) {
            let demo =
              that.url +
              "?reportId=" +
              that.$store.state.login.reportId +
              "&sign=" +
              that.$store.state.login.sign;
            // let demo  = '/pages_workTableChild/reportSign/index' + "?reportId=" + that.$store.state.login.reportId
            // 继续判断是否为社会单位人员，是的话，跳转回url所在的路由页面
            this.$store.dispatch("reportUnitInfos").then((dist) => {
              if (dist.data) {
                uni.reLaunch({
                  url: demo,
                });
              } else {
                uni.showToast({
                  icon: "none",
                  title: dist.data,
                  duration: 2000,
                });
                setTimeout(() => {
                  uni.reLaunch({
                    url: "/pages/layout/index",
                  });
                }, 1000);
              }
            });
            // 不是的话，就直接跳转至首页
          } else {
            let remark = that.$store.state.login.remark;
            if (remark != null || remark == "未修改密码") {
              uni.reLaunch({
                url: "/pages/layout/index",
              });
            } else {
              uni.reLaunch({
                url: "/pages/login/components/ResetPassword",
              });
            }
          }
        });
      }
    },

    // 获取验证码
    getCode() {
      getCodeImg((res) => {
        this.codeUrl = "data:image/gif;base64," + res.img;
        this.form.uuid = res.uuid;
      });
    },
  },
  onLoad(e) {
    this.url = e?.url || "";
  },
};
</script>

<style lang="scss" scoped>
.container_page {
  .header {
    margin-top: -80rpx;
    width: 100vw;
    height: 440rpx;
  }

  .main {
    margin: 40rpx 100rpx;

    .title {
      color: #333;
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 60rpx;
    }

    .formItem {
      margin-bottom: 50rpx;
      vertical-align: baseline;

      .label {
        color: #333;
        font-weight: 400;
        font-size: 26rpx;
        margin-bottom: 40rpx;
      }

      input {
        border-bottom: 1px solid #c1c1c1;
      }

      .content {
        display: inline-block;
        width: 75%;
      }

      .code {
        width: 23%;
        margin-left: 2%;
        background: #f4f4f4;
        height: 80rpx;
        text-align: center;
        display: inline-block;
      }
    }

    .btn_login {
      color: white;
      text-align: center;
      background-color: #335ac6;
      line-height: 70rpx;
      border-radius: 35rpx;
      box-sizing: border-box;
    }
  }

  .footer {
    height: 70rpx;
    width: 100vw;
    background-size: 100%;
    bottom: 0;
    position: absolute;
    background-image: url($uni-imgPrefix + "/login/footer_login.png");
  }
}
</style>
